<template>
    <div class="grid-container">
        <!-- 10个网格项 -->
        <div class="grid-item" v-for="n in nav" :key="n.id">
            <router-link :to="{
                        name:'shop', 
                        query:{
                            msg:JSON.stringify(n),
                            from:from
                            }}">
                <img :src="require('@/assets/images/'+n.img)" alt="Placeholder Image 1">
            </router-link>
            <div class="caption">{{ n.name }}</div>
        </div>
    </div>
</template>

<script>
import { cloneFnJSON } from '@vueuse/core';
import { reactive } from 'vue';

export default {
    name:'TypeNav' ,
    setup(){
        //区分是否从导航栏跳转来的
        let from = 'nav'
        //导航信息
        let nav = reactive(
            [
                // {id:'001',name:'超市卖场',keyword:'',img:'1.jpg',alt:''},
                // {id:'002',name:'便利店',keyword:'',img:'2.jpg',alt:''},
                {id:'003',name:'生鲜菜场',keyword:'vegetable',img:'3.jpg',alt:'',emoji:'🥬'},
                {id:'004',name:'水果果切',keyword:'fruit',img:'4.jpg',alt:'',emoji:'🍉'},
                {id:'005',name:'乳饮酒水',keyword:'drink',img:'5.jpg',alt:'',emoji:'🍺'},
                {id:'007',name:'美妆百货',keyword:'makeup',img:'7.jpg',alt:'',emoji:'👩‍🦰'},
                {id:'006',name:'家具电器',keyword:'furniture',img:'11.jpg',alt:'',emoji:'🪑'},
                {id:'008',name:'休闲零食',keyword:'snack',img:'8.jpg',alt:'',emoji:'🥮'},
                {id:'009',name:'手机数码',keyword:'digital',img:'9.jpg',alt:'',emoji:'📷'},
                {id:'010',name:'宠物用品',keyword:'pet',img:'10.jpg',alt:'',emoji:'🐶'},
                {id:'011',name:'领券中心',keyword:'ticket',img:'6.jpg',alt:'🎟'}
            ]
        )

        return {
            nav,from
        }
    }
}
</script>

<style scoped>
    .grid-container {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 5列 */
        grid-template-rows: repeat(2, 180px); /* 2行，每行高度200px */
        width: 73vw;
        background-color: white;
        border-radius: 10px;
        min-width: 600px;
    }
    .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden; /* 防止图片溢出容器 */
        /* background-color: green; */
    }
    .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 图片填满网格项，同时保持图片比例 */
    }
    .caption {
        margin-top: 5px;
        text-align: center;
        font-size: 14px;
        color: #F56C6C;
    }
</style>